<template>
	<view class="content">
		<view class="box">
			<text class="tishitxt">绑定你的手机号：</text>
			<text class="tishi">- 绑定后才可正常使用夜读书网的所有功能 </text>
			<text class="tishi">- 绑定后可使用手机号登录</text>
			<view class="phone">
				<input v-model="phoneNumber" type="number" placeholder="请输入手机号" class="number"/>
			</view>
			<view class="button" @click="bangdingPhone()">绑定手机</view>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: '',
				openid: '',
				unionid: '',
				username: '', // 微信昵称
				touxiang: '', // 微信头像
				sex: '', // 微信里的性别
				province: '', // 省
				city: '', // 市
			}
		},
		onLoad(option) {
			// 获得设备
			var that = this;
			
			// console.log(option.openid);
			this.openid = option.openid;
			this.unionid = option.unionid;
			this.username = option.username;
			this.touxiang = option.touxiang;
			this.sex = option.sex;
			this.province = option.province;
			this.city = option.city;
		},
		methods: {
			bangdingPhone() {
				// 绑定手机号码
				this.checkPhoneNumber();
			},
			checkPhoneNumber() {
				// 检查手机号码合法性
				// 手机号码段 130~139  145,147 15[012356789] 176,170,177,178 180~189
				// var phone = /^0?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;
				var phone = /^0?(12[0-9]|13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/;
				if(phone.test(this.phoneNumber))
				{
					console.log('输入了正确格式的手机号码');
					uni.request({
						url: 'https://www.yedushu.cn/api/phonenumber', // 判断手机号码是否已经注册过了
						method:'POST',
						data: {
							phonenumber: this.phoneNumber
						},
						success: (res) => {
							if(res.data == 1)
							{
								// 手机号码已经注册过了
								uni.showModal({
								    title: '提示',
								    content: '手机号码已经被其他用户使用，请更换手机号码。',
									showCancel: false,
								    success: function (res) {
								        if (res.confirm) {
								            // console.log('用户点击确定');
								        }
								    }
								});
							}
							if(res.data == 2) // 手机号码不存在
							{
								// 注册会员数据
								this.regUsers();
							}
						}
					});	
					
				} else {
					// 提示输入正确格式的用户名字
					// uni.showToast({
					//     title: '请输入正确的手机号',
					//     duration: 2000
					// });
					uni.showModal({
					    title: '提示',
					    content: '请输入正确的手机号码',
						showCancel: false,
					    success: function (res) {
					        if (res.confirm) {
					            // console.log('用户点击确定');
					        }
					    }
					});
				}
			},
			regUsers() {
				// 保存微信注册会员数据
				uni.request({
					url: 'https://www.yedushu.cn/api/regwxusers', // 保存微信用户信息到主用户表
					method:'POST',
					data: {
						phonenumber: this.phoneNumber,
						openid: this.openid,
						unionid: this.unionid,
						username: this.username,
						touixiang: this.touxiang,
						sex: this.sex,
						province: this.province,
						city: this.city,
					},
					success: (res) => {
						// 微信登录成功
						console.log(res.data);
						uni.request({
							url: 'https://www.yedushu.cn/api/wxlogin', // 获得微信登录（openid）的用户信息
							method:'POST',
							data: {
								openid: this.openid,
							},
							success: (res) => {
								console.log(res.data);
								// 存储登录状态
								uni.setStorageSync('haslogin', true);
								// 储存用户数据
								uni.setStorageSync('userinfo', res.data);
								// 登录成功，跳转到会员中心
								uni.switchTab({
								    url: '../books/myself',
									success(){
										let page = getCurrentPages().pop(); //跳转页面成功之后
										if (!page) return; 
											page.onLoad(); //如果页面存在，则重新刷新页面
										}
								});
							}
						});
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box {
		display: flex;
		flex-direction: column;
		padding-top: 30px;
	}
	.tishitxt {
		font-size: 18px;
	}
	.tishi {
		font-size: 14px;
		line-height: 25px;
		color: #9b9b9b;
	}
	.phone{
		display: flex;
		flex-direction: row;
		border-bottom: #F2F2F2 solid 1px;
		padding: 10px 0;
	}
	.number {
		font-size: 21px;
		/* color: #FF0000; */
		text-align: center;
	}
	.button {
		margin-top: 10px;
		padding: 10px 10px;
		background-color: #41ac52;
		border-radius: 5px;
		text-align: center;
		color: #FFFFFF;
		font-size: 15px;
	}
</style>
